<template>
  <div style="height: 100%">
    <el-container style="height: 100%; border: 1px solid #eee">

      <el-aside :width="sideWidth +'px'" style="background-color: rgb(238, 241, 246);height:100%">
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" ></Aside>
      </el-aside>

      <el-container style="height: 100%;">
        <el-header style="background-color: #fff;padding: 0;border-bottom: 1px solid black">
          <Header :collapseClass="collapseClass" @collapse="collapse" :user="user"></Header>
        </el-header>

        <el-main>
          <!--  二级路由出口 -->
          <router-view @updateUserInfo="getUserInfo"></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";
import userApi from "@/utils/Api/UserApi";

export default {
  components: {
    Aside,
    Header,
  },
  data() {
    return {
      // 控制菜单折叠
      isCollapse: false,
      // 菜单宽度
      sideWidth: 200,
      // 菜单折叠图标
      collapseClass: 'el-icon-s-fold',
      // logo文字显示
      logoTextShow: true,
      // 用户信息
      user: {},
      // 菜单数据
      menus: []
    }
  },
  methods: {
    collapse() {
      // 菜单折叠
      this.isCollapse = !this.isCollapse;
      // 根据菜单是否折叠，设置logo文字显示
      this.logoTextShow = !this.logoTextShow;
      // 根据菜单是否折叠，设置菜单宽度
      if (this.isCollapse) {
        this.sideWidth = 64;
        this.collapseClass = 'el-icon-s-unfold';
      } else {
        this.sideWidth = 200;
        this.collapseClass = 'el-icon-s-fold';
      }
    },
    getUserInfo() {
      // 获取用户信息,localStorage存储的是字符串，所以需要转换
      let username = JSON.parse(localStorage.getItem("user"))
      if (username) {
        userApi.getUserInfo(username).then(res => {
          // 获取用户信息
          if (res.code === 200) {
            this.user = res.data
          }
        })
      }
    },
    updateUserInfo() {
      this.getUserInfo()
    }
  },
  mounted() {
    this.getUserInfo()
  }
};
</script>

<style>
.el-header {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

</style>


